<% layout('layout') -%>

<!-- line below.. We will fix it ;) -->
<br /><br /><br />
<script src="jquery-1.8.2.min.js"></script>

<script>

$(document).ready(function () {
    $("input, textarea").keyup(function(event) {
        writeMPUOutput(
            $('#url').val(),
            '/images/acme-corporation-background.jpg',
            '/images/acme-corporation-logo.png',
            $('#textline1').val(),
            $('#textline2').val(),
            $('#description').val(),
            '',
            $('#twitter').val()
        );
    });
    
    
    writeMPUOutput(
            $('#url').val(),
            '/images/acme-corporation-background.jpg',
            '/images/acme-corporation-logo.png',
            $('#textline1').val(),
            $('#textline2').val(),
            $('#description').val(),
            '',
            $('#twitter').val()
        );
 });

function writeMPUOutput (mpuurl,mpubg,mpulogo,mputitle,mpusubtitle,mpudesc,mputwitter,mpuquery) {
	$("#dynamicWrap").html("<div id='theFancyMpu'></div>");
        
        $("#theFancyMpu").notimempu({
            url: mpuurl,
            background: mpubg,
            tabs: {
                main: {
                    logo: mpulogo,
                    title: mputitle,
                    subtitle: mpusubtitle,
                    description: mpudesc
                },
                twitter: {
                        query: mpuquery
                },
                googlemaps: {
                        
                },
                facebook: {},
                linkedin: {}
            }
        });
}

</script>

<div class="container">

<div class="row">

<div class="span6"> 
	<h2>EasyAD</h2>

<div id="wrapStep1">
<h3>step 1 : choose type</h3>
<select name = "listl" id = "listl">
	<option>MPU</option>
	<option>Little Bar</option>
	<option>Sky Sraper</option>
</select>
</div>

<div id="wrapStep2">
<h3>step 2 : choose template</h3>


<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="Predefined" checked>
Predefined
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="Custom">
Custom
</label>
</div>

<div id="wrapStep3">
<h3>step 3 : enter your data</h3>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>Company Name</label>
</div>
<div class="span3">
<input type="text" name="companyname" id="companyname" placeholder="Type something">
</div>
</div>
</div>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>Email</label>
</div>
<div class="span3">
<input type="text" name="email" name="email" placeholder="Type something">
</div>
</div>
</div>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>URL</label>
</div>
<div class="span3">
<input type="text" name="url" id="url" placeholder="Type something">
</div>
</div>
</div>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>Main Title</label>
</div>
<div class="span4">
<input type="text" name="textline1"  id="textline1" placeholder="Type something" value="ACME Idea Contest" /> <button class="btn btn-small btn-primary" type="button" name="settings1" id="settings1">Settings...</button>
</div>
</div>
</div>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>Subtitle</label>
</div>
<div class="span4">
<input type="text"  name="textline2"  id="textline2" placeholder="Type something" value="Bring it on!"> <button class="btn btn-small btn-primary" type="button" name="settings2" id="settings2" >Settings...</button>
</div>
</div>
</div>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>Description</label>
</div>
<div class="span4">
    <textarea name="description"  id="description" placeholder="Type something" style="height: 300px;" >Rock the world with new ACME product ideas and help us to achieve world domination.
        The Acme Corporation is a fictional corporation that features prominently in the Road Runner/Wile E. Coyote cartoons as a running gag featuring outlandish products that fail catastrophically at the worst possible times. The name is also used as a generic title in many cartoons, films and TV series.
    </textarea>
</div>
</div>
</div>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>Company logo</label>
</div>
<div class="span4">
<input type="file" name="companylogo" id="companylogo" />
</div>
</div>
</div>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>Image 1</label>
</div>
<div class="span4">
<input type="file" name="image1" id="image1" />
</div>
</div>
</div>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>Facebook</label>
</div>
<div class="span4">
<input type="text" name="facebook" id="facebook" placeholder="Type something">
</div>
</div>
</div>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>Twitter</label>
</div>
<div class="span4">
<input type="text" name="twitter" id="twitter" placeholder="Type something" value="#aop">
</div>
</div>
</div>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>LinkedIn</label>
</div>
<div class="span4">
<input type="text" name="linkedin" id="linkedin" placeholder="Type something">
</div>
</div>
</div>

<div class="row">
<div class="form-inline">
<div class="span2">
<label>Tracking Code</label>
</div>
<div class="span4">
<input type="text" name="trackingcode" id="trackingcode" placeholder="Type something">
</div>
</div>
</div>
</div>


<button class="btn btn-primary" type="button" name="advanced" id="advanced">Advanced &raquo;</button>

</div>

<div class="span5">
	<h3>step 3 : Create your MPU</h3>

	<div id="dynamicWrap" style="position: relative; width:300px; height:250px; border:1px solid #000">
	    <div id="theFancyMpu" style="position: absolute; top: 10px; left: 10px; font-weight:700; font-size: 18px"></div>
	</div>
<br />

<button class="btn btn-primary" type="button" name="download" id="download" >Download the AD</button>
<button class="btn btn-primary" type="button" name="getthecode" id="getthecode" >Get the code</button>

</div>
</div>
</div>

 </div>

